<!doctype html>
<html>
    <head>
        <meta charset="UTF-8"/>
	    <link rel="stylesheet" type="text/css" href="/webapp/css/easyui.css">
	    <link rel="stylesheet" type="text/css" href="/webapp/css/icon.css">
      <link rel="stylesheet" type="text/css" href="/webapp/css/color.css">
      <link rel="stylesheet" type="text/css" href="/webapp/css/public.css">
	    <script type="text/javascript" src="/webapp/js/lib/jquery.min.js"></script>
	    <script type="text/javascript" src="/webapp/js/lib/jquery.easyui.min.js"></script>
	    <script type="text/javascript" src="/webapp/js/lib/ajaxfileupload.js"></script>
	    <script type="text/javascript" src="/webapp/js/common/config.js"></script>
    </head>
    <body>
       <div class="easyui-container-fluid">
          <div class="easyui-pannel" style="border: none;">
            <div class="nav" id="nav"></div> 
            <div class="easyui-panel">
               <form id="ff">      
                <div style="margin-bottom:20px">
                  <label class="item-label">品类：</label>
                  <select name="categoryCode" class="easyui-combobox" style="width: 100px;" data-options="panelHeight:'auto'">
                      <option value="value1">电视</option>
                      <option value="value2">冰箱</option>
                      <option value="value3">空调</option>
                      <option value="value4">洗衣机</option>
                  </select>
                  <label class="item-label">名称：</label>
                  <input type="text" name="name" class="easyui-textbox" style="width: 100px;" />
                  <label class="item-label">类型：</label>
                  <select name="type" class="easyui-combobox" style="width: 100px;" data-options="panelHeight:'auto'">
                    <option value="">-请选择-</option>
                    <option value="value1">文字</option>
                    <option value="value2">数字</option>
                    <option value="value3">布尔</option>
                    <option value="value4">单选</option>
                  </select>
                  <label class="item-label">可选值：</label>
                  <input type="text" name="tags" class="easyui-textbox" style="width: 100px;" />
                </div>
                <div style="margin-bottom:20px">
                  <label class="item-label">是否必填：</label>
                  <select name="require" class="easyui-combobox" style="width: 100px;" data-options="panelHeight:'auto'">
                    <option value="">-请选择-</option>
                    <option value="true">是</option>
                    <option value="false">否</option>
                  </select>
                  <label class="item-label">状态：</label>
                  <select name="entityStatus" class="easyui-combobox" data-options="panelHeight:'auto'" style="width: 100px;" >
                    <option value="">-请选择-</option>
                    <option value="OK">正常</option>
                    <option value="DISABLE">不可用</option>
                  </select>    
                </div>
                </form>
                <div style="margin-bottom:20px;text-align: center;">
                  <a href="javascript:void(0);" class="easyui-linkbutton c8" style="width:80px;" onclick="searchBy()">查询</a>
                </div>
            </div>
            <div class="table-wrapper">
             <table id="datagrid" class="easyui-datagrid">
               <thead>
                 <tr>
                   <th data-options="field:'code',align:'center'" width="80">编码</th>
                   <th data-options="field:'categoryCode',align:'center'" width="100">品类</th>
                   <th data-options="field:'name',align:'center'" width="100">名称</th>
                   <th data-options="field:'type',align:'center'" width="100">类型</th>
                   <th data-options="field:'tags',align:'center'" width="240">可选值</th>
                   <th data-options="field:'require',align:'center'" width="100">是否必填</th>
                   <th data-options="field:'orderList',align:'center'" width="160">序号</th>
                   <th data-options="field:'entityStatus',align:'center',formatter:statusFormatter" width="80">状态</th>
                   <th data-options="field:'action',align:'center',formatter:actions" width="160">操作</th>
                 </tr>
               </thead>
               <tbody>
               </tbody>
             </table>
           </div>
          </div> 
       </div>  
    </body>
    <script type="text/javascript">
           $(function(){
               setNav();
               $("#datagrid").datagrid({
                   pagination:true,
                   rownumbers:true,
                   toolbar:[{
                        text:"添加品类元数据",
                        handler:function(){
                          window.parent.addTab("添加品类元数据","../product/categorymetadata/add.html");
                        }
                      }]
               });
               $.ajax({
                   url:config.url + "/category",
                   type:"get",
                   xhrFields:{withCredentials:true},
                   data:{size:10},
                   success:function(data){
                      $("#datagrid").datagrid({data:data.content}).datagrid("getPager").pagination({
                        pageList:[10,15,20,25,30,35,40,50,100],
                        displayMsg:"共"+data.totalElements+"条记录"
                      });
                   },
                   error:function(data){
                      console.log(data);
                   }
               });

           });
           function actions(val,row){
              return "<a href='javascript:void(0);' class='easyui-linkbutton l-btn l-btn-small' "+
                     "style='width:60px;' onclick='edit(\""+row.id+"\")'>修改</a>&nbsp;&nbsp;"+
                     "<a href='javascript:void(0);' class='easyui-linkbutton l-btn l-btn-small' style='width:60px;' onclick='disableOne(\""+row.id+"\")'>禁用</a>";
           }
           function edit(id){
               window.location.href = "./add.html?id="+id;
           }
           function disableOne(id){
              $.messager.confirm("提示","您确定禁用该记录吗？",function(flag){
                 if(flag){
                    $.ajax({
                        url:config.url+"/categorymetadata/"+id,
                        type:'DELETE',
                        xhrFields:{withCredentials:true},
                        success:function(data){
                            $.messager.alert("提示","操作成功");
                            $.ajax({
                               url:config.url + "/categorymetadata",
                               type:"get",
                               data:{size:10},
                               xhrFields:{withCredentials:true},
                               success:function(data){
                                  $("#datagrid").datagrid({data:data.content}).datagrid("getPager").pagination({
                                    pageList:[10,15,20,25,30,35,40,50,100],
                                    displayMsg:"共"+data.totalElements+"条记录"
                                  });
                               },
                               error:function(data){
                                  console.log(data);
                               }
                           });
                        },
                        error(XMLHttpRequest,textStatus,thrown){

                        }
                    });
                 }
            });
           }
           
           function searchBy(){
              var data = getFormData(document.getElementById("ff"));
              $.ajax({
                   url:config.url + "/categorymetadata",
                   type:"get",
                   data:transfer(data),
                   xhrFields:{withCredentials:true},
                   success:function(data){
                      $("#datagrid").datagrid({data:data.content}).datagrid("getPager").pagination({
                        pageList:[10,15,20,25,30,35,40,50,100],
                        displayMsg:"共"+data.totalElements+"条记录"
                      });
                   },
                   error:function(data){
                      console.log(data);
                   }
               });
           }
      </script>
</html>
